<template>
    <div class="app-container">
        <el-card class="filter-container" shadow="never">
            <div>
                <i class="el-icon-search"></i>
                <span>筛选搜索</span>
                <el-button style="float:right" type="primary" @click="initdata()" size="small">查询搜索</el-button>
                <el-button style="float:right;margin-right: 15px" @click="resetfiled()" size="small">重置</el-button>
            </div>
            <div style="margin-top: 15px">
                <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
                        <el-form-item label="type">
                            <el-input
                                    v-model="listQuery.type"
                                    class="input-width"
                                    placeholder="请输入type"
                                    clearable
                            ></el-input>
                        </el-form-item>                        <el-form-item label="name">
                            <el-input
                                    v-model="listQuery.name"
                                    class="input-width"
                                    placeholder="请输入name"
                                    clearable
                            ></el-input>
                        </el-form-item>                        <el-form-item label="xueli">
                            <el-input
                                    v-model="listQuery.xueli"
                                    class="input-width"
                                    placeholder="请输入xueli"
                                    clearable
                            ></el-input>
                        </el-form-item>                        <el-form-item label="zhuanye">
                            <el-input
                                    v-model="listQuery.zhuanye"
                                    class="input-width"
                                    placeholder="请输入zhuanye"
                                    clearable
                            ></el-input>
                        </el-form-item>                        <el-form-item label="position">
                            <el-input
                                    v-model="listQuery.position"
                                    class="input-width"
                                    placeholder="请输入position"
                                    clearable
                            ></el-input>
                        </el-form-item>                        <el-form-item label="miaoshu">
                            <el-input
                                    v-model="listQuery.miaoshu"
                                    class="input-width"
                                    placeholder="请输入miaoshu"
                                    clearable
                            ></el-input>
                        </el-form-item>                        <el-form-item label="yaoqiu">
                            <el-input
                                    v-model="listQuery.yaoqiu"
                                    class="input-width"
                                    placeholder="请输入yaoqiu"
                                    clearable
                            ></el-input>
                        </el-form-item>                </el-form>
            </div>
        </el-card>
        <el-card class="operate-container" shadow="never">
            <i class="el-icon-tickets"></i>
            <span>数据列表</span>
            <el-button size="mini" class="btn-add" @click="isadd()" style="margin-left: 20px">添加</el-button>
        </el-card>

        <div style="margin:0px;">
            <el-table :data="tableData" border stripe>
                <el-table-column prop="id" label="id" align="center"></el-table-column>
                    <el-table-column
                            prop="type"
                            label="type"
                            align="center"
                    ></el-table-column>                    <el-table-column
                            prop="name"
                            label="name"
                            align="center"
                    ></el-table-column>                    <el-table-column
                            prop="xueli"
                            label="xueli"
                            align="center"
                    ></el-table-column>                    <el-table-column
                            prop="zhuanye"
                            label="zhuanye"
                            align="center"
                    ></el-table-column>                    <el-table-column
                            prop="position"
                            label="position"
                            align="center"
                    ></el-table-column>                    <el-table-column
                            prop="miaoshu"
                            label="miaoshu"
                            align="center"
                    ></el-table-column>                    <el-table-column
                            prop="yaoqiu"
                            label="yaoqiu"
                            align="center"
                    ></el-table-column>                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="delrecord(scope.row)">删除</el-button>
                        <el-button
                                type="primary"
                                @click="isupdate = true;refform = scope.row; isadddia = true;"
                        >更新</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="text-align:center;">
            <el-pagination
                    @size-change="sizeChange"
                    @current-change="currentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20, 50]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalNum"
                    background
            ></el-pagination>
        </div>
        <el-dialog
                :title="isupdate ? '更新' : '添加'"
                :visible.sync="isadddia"
                center
                width="40%"
                @close="isadddia = false"
        >
            <el-form :model="refform" ref="refform" label-width="80px" style="margin: 0px 70px;">
                    <el-form-item label="type">
                        <el-input v-model="refform.type"></el-input>
                    </el-form-item>                    <el-form-item label="name">
                        <el-input v-model="refform.name"></el-input>
                    </el-form-item>                    <el-form-item label="xueli">
                        <el-input v-model="refform.xueli"></el-input>
                    </el-form-item>                    <el-form-item label="zhuanye">
                        <el-input v-model="refform.zhuanye"></el-input>
                    </el-form-item>                    <el-form-item label="position">
                        <el-input v-model="refform.position"></el-input>
                    </el-form-item>                    <el-form-item label="miaoshu">
                        <el-input v-model="refform.miaoshu"></el-input>
                    </el-form-item>                    <el-form-item label="yaoqiu">
                        <el-input v-model="refform.yaoqiu"></el-input>
                    </el-form-item>            </el-form>
            <span slot="footer">
        <el-button @click="isadddia = false">取 消</el-button>
        <el-button type="primary" @click="isupdate ? updaterecord() : addrecord()">确 定</el-button>
      </span>
        </el-dialog>
    </div>
</template>
<script>

    import JobService from "@/api/JobService";

    export default {
        components: {},
        data() {
            return {
                listQuery: {
						id: "",
						type: "",
						name: "",
						xueli: "",
						zhuanye: "",
						position: "",
						miaoshu: "",
						yaoqiu: "",
        },
            pageSize: 5,
                    currentPage: 1,
                    totalNum: 0,
                    isupdate: false,
                    isshowqr: false,
                    qrdata: "",
                    tableData: [],
                    isadddia: false,
                    refform: {
								type: "",
								name: "",
								xueli: "",
								zhuanye: "",
								position: "",
								miaoshu: "",
								yaoqiu: "",
            }
        };
        },
        computed: {},
        watch: {},
        mounted() {
            this.initdata();
        },
        methods: {
            sizeChange(val) {
                this.pageSize = val;
                this.initdata();
            },
            currentChange(val) {
                this.currentPage = val;
                this.initdata();
            },

            delrecord(row) {
								JobService.remove({code: row.code}).then(res => {
                    this.initdata()
                });
            },
            updaterecord() {
								JobService.update(this.refform).then(res => {
                    this.isadddia = false;
                    this.initdata()
                });
            },
            initdata() {
								JobService.list({current: this.currentPage, size: this.pageSize,
									type: this.listQuery.type,
									name: this.listQuery.name,
									xueli: this.listQuery.xueli,
									zhuanye: this.listQuery.zhuanye,
									position: this.listQuery.position,
									miaoshu: this.listQuery.miaoshu,
									yaoqiu: this.listQuery.yaoqiu,
            }).then(res => {
                    this.tableData = res.data.records;
                    this.totalNum = res.data.total;
                })
            },
            isadd() {
                this.isadddia = true;
                this.isupdate = false;
                    this.refform.type = ""
                    this.refform.name = ""
                    this.refform.xueli = ""
                    this.refform.zhuanye = ""
                    this.refform.position = ""
                    this.refform.miaoshu = ""
                    this.refform.yaoqiu = ""
            },

            resetfiled() {
                    this.listQuery.type = ""
                    this.listQuery.name = ""
                    this.listQuery.xueli = ""
                    this.listQuery.zhuanye = ""
                    this.listQuery.position = ""
                    this.listQuery.miaoshu = ""
                    this.listQuery.yaoqiu = ""
            },

            addrecord() {
								JobService.insert(this.refform).then(res => {
                    if (res.code == 0) {
                        this.isadddia = false;
                        this.initdata();
                    }
                });
            }
        }
    };
</script>
<style lang='scss' scoped>
</style>